<!DOCTYPE html>
<html lang="zh-CN">
<!--复用页面tags-list.html-->
<!--1.差异部分为getTagList方法|2.  <div class="right">-->
<!--  测试参数 id="3" -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>政府采购信息网</title>
    <meta name="description" content="描述">
    <meta name="keywords" content="关键词">
    <link rel="icon" href="/web/img/favicon.ico">
    <link rel="shortcut icon" href="/web/img/favicon.ico">
    <link rel="stylesheet" href="/web/lib/search-history/index.css">
    <style type="text/less">
        @import "/web/public/public.less";

        .container {
            #main {
                .clearfix;
                width: 1024px;
                margin: 0 auto;
                position: relative;

                .top {
                    margin-top: 11px;
                    width: 1024px;
                    height: 239px;

                    .search-warp {
                        width: 1024px;
                        height: 194px;
                        background-color: #edf1f4;
                        padding-top: 51px;

                        .search-box {
                            height: 46px;
                            font-size: 0;

                            .input-wrap {
                                display: inline-block;
                                vertical-align: top;
                                margin-left: 51px;
                                width: 581px;
                                height: 100%;
                                background-color: #ffffff;

                                .icon-search {
                                    margin: 15px;
                                    width: 15px;
                                    height: 15px;
                                    background: url("/web/img/search_left_ico.png") no-repeat center;
                                    background-size: contain;
                                }

                                input {
                                    width: 530px;
                                    height: 100%;
                                    font-family: MicrosoftYaHei;
                                    font-size: 16px;
                                    font-weight: normal;
                                    font-stretch: normal;
                                    line-height: 24px;
                                    letter-spacing: 2px;
                                    color: #333333;
                                }

                            }

                            .search-btn-left {
                                display: inline-block;
                                text-align: center;
                                width: 125px;
                                height: 46px;
                                background-color: #72a3f4;
                                font-family: MicrosoftYaHei;
                                font-size: 18px;
                                font-weight: normal;
                                font-stretch: normal;
                                line-height: 46px;
                                letter-spacing: 2px;
                                color: #ffffff;
                                cursor: pointer;
                            }

                            .search-btn-center {
                                display: inline-block;
                                text-align: center;
                                width: 125px;
                                height: 46px;
                                background-color: #4285f4;
                                font-family: MicrosoftYaHei;
                                font-size: 18px;
                                font-weight: normal;
                                font-stretch: normal;
                                line-height: 46px;
                                letter-spacing: 2px;
                                color: #ffffff;
                                cursor: pointer;
                            }

                            .search-btn-right {
                                display: inline-block;
                                text-align: center;
                                width: 125px;
                                height: 46px;

                                a {
                                    /*background-color: #4285f4;*/
                                    font-family: MicrosoftYaHei;
                                    font-size: 18px;
                                    font-weight: normal;
                                    font-stretch: normal;
                                    line-height: 24px;
                                    letter-spacing: 1px;
                                    color: #ff7901;
                                }
                            }
                        }

                        .list-title {
                            line-height: 29px;
                            height: 29px;
                            margin-top: 52px;
                            padding-left: 14px;

                            & > li {
                                text-align: center;
                                margin-left: 14px;
                                width: 61px;
                                font-family: MicrosoftYaHei;
                                font-size: 16px;
                                font-weight: normal;
                                font-stretch: normal;
                                line-height: 29px;
                                letter-spacing: 1px;
                                color: #333333;
                                .fl;

                                & + li {
                                }

                                &.active {
                                    background-color: #4285f4;

                                    a {
                                        font-family: MicrosoftYaHei;
                                        font-size: 16px;
                                        font-weight: normal;
                                        font-stretch: normal;
                                        line-height: 29px;
                                        letter-spacing: 1px;
                                        color: #ffffff;

                                        &:hover {
                                            text-decoration: underline;
                                        }
                                    }
                                }
                            }
                            .search-btn-toright {
                                display: inline-block;
                                /*text-align: center;*/
                                margin-left: 30px;
                                width: 125px;
                                height: 46px;

                                a {
                                    font-weight: bold;
                                    font-family: MicrosoftYaHei;
                                    font-size: 16px;
                                    font-stretch: normal;
                                    line-height: 24px;
                                    letter-spacing: 1px;
                                    color: #ff7901;
                                }
                            }

                            //20210204]
                        }

                        #id_search-result-text-box {
                            display: none;
                        }

                        .search-right-text-box {
                            height: 29px;
                            float: right;
                            font-size: 0;
                            margin-right: 13px;

                            .search-right-text {
                                font-family: MicrosoftYaHei;
                                font-size: 12px;
                                font-weight: normal;
                                font-stretch: normal;
                                line-height: 29px;
                                letter-spacing: 1px;
                                color: #a1a1a1;
                                display: inline-block;
                                text-align: right;

                            }


                        }

                    }

                    .list-order-btn {
                        width: 100%;
                        height: 15px;
                        line-height: 15px;
                        margin-top: 30px;

                        & > li {
                            margin-right: 21px;
                            display: inline;
                            width: 89px;
                            font-family: MicrosoftYaHei;
                            font-size: 14px;
                            font-weight: normal;
                            font-stretch: normal;
                            line-height: 15px;
                            letter-spacing: 1px;
                            color: #949494;
                            cursor: pointer;

                            i {
                                height: 15px;
                                line-height: 15px;
                                margin-right: 6px;
                            }

                            &.active {
                                color: #4285f4;

                                &:hover {
                                    text-decoration: underline;
                                }
                            }
                        }
                    }
                }

                .left {
                    width: 680px;
                    min-height: 500px;
                    padding-top: 15px;
                    .fl;

                    .content-list {
                        & > li {
                            border-bottom: 1px solid #EEEEEE;
                            padding: 20px 0;
                            .clearfix;

                            .left {
                                width: 230px !important;
                                height: 140px !important;
                                min-height: 0 !important;
                                padding: 0 !important;
                                .fl;

                                img {
                                    width: 100%;
                                    height: 100%;
                                }

                                & + .right {
                                    width: 435px !important;
                                    .fr;
                                }
                            }

                            .right {
                                min-height: 0 !important;

                                .title {
                                    width: 100%;
                                    font-size: 20px;
                                    .ellipsis;
                                }

                                p {
                                    height: 45px;
                                    color: #7f7f7f;
                                    font-size: 14px;
                                    line-height: 24px;
                                    margin-top: 15px;
                                    .ellipsis-mult(2);
                                }

                                .info {
                                    height: 27px;
                                    overflow: hidden;
                                    margin-top: 30px;
                                    font-size: 14px;
                                    color: #a8a8a8;
                                    .clearfix;
                                    line-height: 26px;

                                    i {
                                        margin-left: 20px;

                                        &:first-child {
                                            margin-left: 0;
                                        }

                                        & + span {
                                            margin-left: 5px;
                                        }
                                    }

                                    a {
                                        display: inline-block;
                                        color: #a8a8a8;
                                        background-color: #F0F0F0;
                                        border-radius: 13px;
                                        padding: 0 13px;
                                        .fr;
                                        margin-left: 10px;

                                        &:last-child {
                                            margin-left: 0;
                                        }
                                    }
                                }
                            }
                        }

                    }
                }
                span {
                    &.high-light {
                        color: #C0392B ;
                    }
                }
                & > .right {
                    width: 302px;
                    min-height: 500px;
                    .fr;
                    padding-top: 15px;
                }
            }
        }
    </style>

    <script src="/web/lib/less.min.js"></script>
    <script src="/web/lib/jquery-1.12.4.min.js"></script>
    <script src="/web/public/public.js"></script>
    <script src="/web/lib/jquery.pagination.js"></script>
</head>
<body>
<div class="container">
    <!--这里引入header-->
    <!--#include virtual="/web/html/header/header.htm"-->
    <div id="main">
        <div class="top">
            <div class="search-warp">
                <div class="search-box">
                    <div class="input-wrap">
                        <i class="icon-search"></i>
                        <input class="search-input" type="text"/>
                        <!-- 历史记录入口 -->
                        <div class="history-list"></div>                    </div>
                    <div class="search-btn-left" id="id_ssbt">搜索标题</div>
                    <div class="search-btn-center" id="id_ssqw">搜索全文</div>
                </div>
                <ul class="list-title">
                    <li class="active"><a href="javascript:">全部</a></li>
                    <li><a href="javascript:">法规</a></li>
                    <li><a href="javascript:">案例</a></li>
                    <li><a href="javascript:">资讯</a></li>
                    <li><a href="javascript:">专题</a></li>
                    <div class="search-btn-toright"><a id="id_ssbx" href="javascript:">标讯</a></div>
                    <div class="search-right-text-box" id="id_search-result-text-box">
                        <span class="search-right-text" id="id_search-result-text">含“汽车汽【引号这里最多显示24个字超出用...代替】汽车汽车汽...”的搜索标题结果为32323232条</span>
                    </div>
                </ul>
            </div>
            <ul class="list-order-btn">
                <li class="active"><i class="iconfont icon-biezhen"></i><span href="javascript:">相关性</span></li>
                <li><i class="iconfont icon-shijian1"></i><span href="javascript:">发布时间</span></li>
            </ul>
        </div>
        <div class="left">
            <ul class="content-list"></ul>
            <div class="list-pagination"></div>
        </div>
        <div class="right">
            <!-- 视频课堂 -->
            <!--#include virtual="/web/html/fragment/public/video-classroom.htm"-->
            <!-- 亚利聊政采 -->
            <!--#include virtual="/web/html/fragment/public/audio-column.htm"-->

            <!-- 热点专题 -->
            <!--#include virtual="/web/html/fragment/home/right-boutique.htm"-->
            <!-- 热点排行 -->
            <!--#include virtual="/web/html/fragment/home/right-hot-search.htm"-->
            <!-- 热点排行 -->
            <!--#include virtual="/web/html/fragment/home/ad-list-one.htm"-->
            <!--#include virtual="/web/html/fragment/home/ad-list-two.htm"-->
        </div>
    </div>
    <!--#include file="/web/html/footer/footer.htm"-->

</div>

<script>

    var $aListTileLi = $('ul.list-title>li');//分类tab标签
    var $aListOrderLi = $('ul.list-order-btn>li');//分类排序按钮
    var bufArticleType = 0;//当前选中分类tab标签/法规0/案例1/资讯2/专题3
    var bufSort = 0;//当前选中分类排序按钮/相关性0/发布时间1
    var bufSearchType = 0; //搜索标题0/搜索全文1


    <!--  TDK与网站首页相同-->
    var tagId = utils.getQueryVariable('id');
    var inputSearch = utils.getQueryVariable('inputSearch');
    var searchType = utils.getQueryVariable('searchType');
    $(function () {

        console.log(searchType);
        if(searchType == null){
            bufArticleType = 0
        }else{
            bufArticleType = searchType
            $aListTileLi.removeClass('active');
            $aListTileLi.eq(bufArticleType).addClass('active');
        }
        if (inputSearch) {
            $('.search-box .input-wrap>input').val(decodeURI(inputSearch));
        }
        $.ajax({
            url: ports.getTagListTdk,
            data: {
                keyword: 101
            },
            success: function (res) {
                console.log('获取标签列表tdk', res);
                $("title").text(res.data.channelTitle + '-政府采购信息网' || '政府采购信息网');
                $("meta[name='keywords']").prop('content', res.data.channelKeyword || '');
                $("meta[name='description']").prop('content', res.data.channelDescriptions || '');
            }
        })
//分类tab标签
        $aListTileLi.click(function () {
            bufArticleType = $(this).index();
            $aListTileLi.removeClass('active');
            $(this).addClass('active');
            getTagList(getsearchType(), getsort(), getarticleType(), getqueryText(), 1, true);
        });
//分类排序按钮
        $aListOrderLi.click(function () {
            bufSort = $(this).index();
            $aListOrderLi.removeClass('active');
            $(this).addClass('active');
            getTagList(getsearchType(), getsort(), getarticleType(), getqueryText(), 1, true);
        });
        //搜索标题type点击监听
        $('#id_ssbt').click(function () {
            console.log("搜索标题type点击监听");

            // console.log("$searchValue=" + $searchValue);
            // $('#id_search-result-text-box').hide();
            bufSearchType = 0;
            getTagList(getsearchType(), getsort(), getarticleType(), getqueryText(), 1, true);
        });
        //搜索全文type点击监听
        $('#id_ssqw').click(function () {
            console.log("搜索全文type点击监听");

            bufSearchType = 1;
            getTagList(getsearchType(), getsort(), getarticleType(), getqueryText(), 1, true);
        });
        //搜索外链易找标
        $('#id_ssbx').click(function () {
            //	跳转
            window.open('https://yzb.caigou2003.com/search?keyword=' + getqueryText() + '&method=1');
        });

        getTagList(getsearchType(), getsort(), getarticleType(), getqueryText(), 1, true);
        onload();
    })
    //列表
    /* searchType  1搜索标题 2搜索全文
     sort   1相似度排序 2时间倒序  默认1
     articleType  0 全部 1 资讯 2法规 3案例 5专题
     queryText  关键词
     pageNum 页码
     pageSize 分页*/
    function getTagList(searchType, sort, articleType, queryText, pageNum, resetPage) {
        var pageSize = 12;
        console.log('获取标签列表开始', queryText);
        $.ajax({
            url: ports.front_article_es_list,
            data: {
                searchType: searchType,
                sort: sort,
                articleType: articleType,
                queryText: queryText,
                pageNum: pageNum,
                pageSize, pageSize,
            },
            success: function (res) {
                console.log('获取标签列表11', res);
                if (res.status == 200) {
                    var tagListHtml = '';
                    var tagList = res.data.list;
                    if (tagList && tagList.length) {
                        tagList.forEach(function (item) {
                            var keywordsListHtml = '';
                            item.articleKeywords.forEach(function (item1) {
                                keywordsListHtml += '<a href=' + '/web/tagList/1.html?tag=' + item1.label + ' class="tag">' + item1.label + '</a>'
                            })
                            tagListHtml += '<li>\n' +
                                (item.articleImage ? '<div class="left">'+'<a target="_blank" href="' + (item.articleOutLinkStatus==0?item.articleUrl:item.articleOutLink) + '">' + '<img src=' + item.articleImage + ' alt=' + item.articleTitle + '></a></div>' : '')
                                +
                                '                    <div class="right">\n' +
                                '                        <div class="title"><a target="_blank" href="' + (item.articleOutLinkStatus==0?item.articleUrl:item.articleOutLink) + '">' + item.articleTitle + '</a></div>\n' +
                                '                        <p>\n' + '<a target="_blank" href="' + (item.articleOutLinkStatus==0?item.articleUrl:item.articleOutLink) + '">' + item.articleInfo +'</a>'+
                                '                        </p>\n' +
                                '                        <div class="info">\n' +
                                (item.articleReleaseTime ? '                             <i class="iconfont icon-shijian"></i><span>' + item.articleReleaseTime.substr(0, 10) + '</span>\n' :'' )+
                                '\n'
                                + keywordsListHtml +
                                '                        </div>\n' +
                                '                    </div>\n' +
                                '                </li>'
                        })
                        $(".list-pagination").css("visibility","visible");//显示div20201216
                    } else {
                        tagListHtml = '<li class="no-data">暂无数据</li>'; //20201216
                        // $('.list-pagination').remove();20201216
                        $(".list-pagination").css("visibility","hidden");//隐藏div//20201216

                    }
                    $('ul.content-list').html(tagListHtml);
                    //结果显示文案设置
                    setResultText(res.data.total);
                    if (resetPage) {
                        $('.list-pagination').pagination({
                            prevContent: '< 上一页',
                            nextContent: '下一页 >',
                            totalData: res.data.total,
                            showData: pageSize,
                            coping: true,
                            callback: function (api) {
                                console.log(api.getCurrent());
                                var current = api.getCurrent();
                                document.body.scrollTop = 0;
                                document.documentElement.scrollTop = 0;
                                // getTagList(current, false);
                                getTagList(searchType, sort, articleType, queryText, current, false);
                            }
                        });
                    }

                }
            }
        });
        recordHistory(queryText);
    }

    //结果显示文案设置
    // 含“汽车汽【引号这里最多显示24个字超出用...代替】汽车汽车汽...”的搜索标题结果为32323232条
    function setResultText(total) {
        let bufStr = '含“';
        bufStr += getqueryText().length > 24 ? getqueryText().substr(0, 24) + '...' : getqueryText();
        bufStr += '”的';
        bufStr += getsearchText();
        bufStr += '结果为';
        bufStr += total;
        bufStr += '条';
        // 共找到 10802746 条内容
        $('#id_search-result-text')[0].innerHTML = bufStr;
        $('#id_search-result-text-box').show();
    }

    /* searchType  1搜索标题 2搜索全文
           sort   1相似度排序 2时间倒序  默认1
           articleType  0 全部 1 资讯 2法规 3案例 5专题
           queryText  关键词
           pageNum 页码
           pageSize 分页*/
    function getsearchType() {
        if (bufSearchType == 0) {
            return 1;
        } else if (bufSearchType == 1) {
            return 2;
        }
    }

    function getsearchText() {
        // 搜索标题0/搜索全文1
        if (bufSearchType == 0) {
            return '搜索标题';
        } else if (bufSearchType == 1) {
            return '搜索全文';
        }
    }

    function getsort() {
        if (bufSort == 0) {
            return 1;
        } else if (bufSort == 1) {
            return 2;
        }
    }

    // var bufArticleType = 0;//当前选中分类tab标签 /全部0/法规1/案例2/资讯3/专题4
    function getarticleType() {
        if (bufArticleType == 0) {
            return 0;
        } else if (bufArticleType == 1) {
            return 2;
        } else if (bufArticleType == 2) {
            return 3;
        } else if (bufArticleType == 3) {
            return 1;
        } else if (bufArticleType == 4) {
            return 5;
        }
    }

    function getqueryText() {
        return $('.search-box .input-wrap>input').val();
    }
    function onload(){
        let input = $("input.search-input")
        input.focus(() => {
            // 获取历史记录
            let history = JSON.parse(localStorage.getItem("history") || "[]")
            let f = $(".history-list")
            // 先清空item
            f.find(".history-item").remove()
            // 再从缓存中循环添加item
            history.forEach(item => {
                f.append($("<div class='history-item item'>" + item + "</div>"))
            })
            // 如果有历史记录，就加入删除功能
            history.length && f.append($("<div class='history-item del'>删除记录</div>"))
            $(".history-list").css("display", "block")
            // 监听删除点击事件
            $("div.history-item.del").click(() => {
                localStorage.removeItem("history")
            })
            // 监听历史记录点击事件, 注意this指向
            $("div.history-item.item").click(function () {
                input.val($(this).text())
                bufSearchType = 0;
                getTagList(getsearchType(), getsort(), getarticleType(), getqueryText(), 1, true);
            })
        })
        input.blur(() => {
            setTimeout(() => {
                $(".history-list").css("display", "none")
            }, 200)
        })
    }
    /**
     * 搜索历史记录
     * @param {String} queryText 关键词
     */
    function recordHistory(queryText) {
        let history = JSON.parse(localStorage.getItem("history") || "[]")
        if (!!queryText) {
            let i = history.indexOf(queryText)
            i !== -1 && history.splice(i, 1)
            history.unshift(queryText)
            history.length >= 6 && (history.length = 5)
        }
        localStorage.setItem("history", JSON.stringify(history))
    }
</script>
</body>
</html>
